<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<base th:href="@{/}">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>chargebacks</title>
    <link rel="shortcut icon" th:href="@{/assets/images/Shop.ico}">
    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">
</head>
<body>

<div th:include="head :: headname"></div>


<!-- Breadcrumb Section Start -->
<div class="section">

    <!-- Breadcrumb Area Start -->
    <div class="breadcrumb-area bg-primary">
        <div class="container">
            <div class="breadcrumb-content">
                <ul>
                    <li>
                        <a th:href="@{/goods/index}"><i class="fa fa-home"></i> </a>
                    </li>
                    <li class="active">退货</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

</div>
<!-- Breadcrumb Section End -->
<div class="section section-margin">
    <div class="container">

        <div class="row mb-n4">
            <!-- My Account Tab Menu Start -->
            <div class="col-lg-3" th:fragment="leafname">
                <!-- Sidebar Widget Start -->
                <aside class="sidebar_widget mt-10 mt-lg-0">
                    <div class="widget_inner">
                        <div class="widget-list mb-10">
                            <h3 class="widget-title mb-6">订单中心</h3>
                            <!-- Widget Menu Start -->
                            <nav>
                                <ul class="category-menu mb-n3">
                                    <li class="menu-item-has-children pb-4"><a th:href="@{order/allOrder}">全部订单 </a></li>
                                    <li class="menu-item-has-children pb-4"><a th:href="@{order/obligation}">待付款 </a></li>
                                    <li class="menu-item-has-children pb-4"><a th:href="@{order/received}">待收货 </a></li>
                                    <li class="menu-item-has-children pb-4"><a th:href="@{order/allcomment}">已评论 </a></li>
                                </ul>
                            </nav>
                            <!-- Widget Menu End -->
                        </div>
                        <div class="widget-list mb-10">
                            <h3 class="widget-title mb-6">用户中心</h3>
                            <div class="sidebar-body">
                                <ul class="sidebar-list">
                                    <li><a href="#">个人信息 </a></li>
                                    <li><a href="#">我的收藏 </a></li>
                                    <li><a href="#">地址管理 </a></li>
                                    <li><a href="#">优惠券 </a></li>
                                    <li><a href="#">积分商城 </a></li>
                                </ul>
                            </div>
                        </div>
                        <!--  <div class="widget-list mb-10">
                              <h3 class="widget-title mb-6">用户中心</h3>
                              <ul class="category-menu mb-n3">
                                  <li class="menu-item-has-children pb-4">
                                      <a th:href="@{/user/personal/{id}(id=${userInfo.id})}" style="color: rgb(0, 196, 204)">个人信息
                                          <i class="fa fa-angle-left"></i></a></li>
                                  <li class="menu-item-has-children pb-4">
                                      <a th:href="@{/user/accountSafe/{id}(id=${userInfo.id})}">账号安全
                                          <i class="fa fa-angle-right"></i></a></li>
                                  <li class="menu-item-has-children pb-4"><a href="#">我的收藏
                                      <i class="fa fa-angle-right"></i></a></li>
                                  <li class="menu-item-has-children pb-4">
                                      <a th:href="@{/user/addressBook/{id}(id=${userInfo.id})}">地址管理
                                          <i class="fa fa-angle-right"></i></a></li>
                                  <li class="menu-item-has-children pb-4"><a href="#">优惠券
                                      <i class="fa fa-angle-right"></i></a></li>
                                  <li class="menu-item-has-children pb-4"><a href="#">积分商城
                                      <i class="fa fa-angle-right"></i></a></li>
                              </ul>
                          </div>-->
                        <div class="widget-list">
                            <h3 class="widget-title mb-6">猜你喜欢</h3>

                            <div class="sidebar-body product-list-wrapper mb-n6">

                                <!-- Single Product List Start -->
                                <div class="single-product-list mb-6" th:each="re:${sList}">
                                    <!-- Product List Thumb Start -->
                                    <div class="product">
                                        <div class="thumb">
                                            <a href="single-product.html" class="image">
                                                <img class="fit-image first-image" th:src="${re.pic}"
                                                     alt="Product Image">
                                                <!--                                    <img class="fit-image second-image"-->
                                                <!--                                         src="assets/images/products/small-product/10.jpg" alt="Product Image">-->
                                            </a>
                                        </div>
                                    </div>
                                    <!-- Product List Thumb End -->

                                    <!-- Product List Content Start -->
                                    <div class="product-list-content">
                                        <h6 class="product-name">
                                            <a href="single-product.html" th:text="${re.name}"></a>
                                        </h6>
                                        <span class="price">
                                                    <span class="new" th:text="'￥'+${re.promotionPrice}">$12.50</span>
                                            <span class="old" th:text="'￥'+${re.price}"></span>
                                            </span>
                                    </div>
                                    <!-- Product List Content End -->

                                </div>
                                <!-- Single Product List End -->



                            </div>
                        </div>
                    </div>
                </aside>
                <!-- Sidebar Widget End -->
            </div>
            <!-- My Account Tab Menu End -->

            <div class="col-lg-9 col-12 mb-4">

                <!-- Your Order Area Start -->
                <div class="your-order-area border">

                    <!-- Title Start -->
                    <h3 class="title">我的订单</h3>
                    <!-- Title End -->

                    <!-- Your Order Table Start -->
                    <div class="your-order-table table-responsive">
                        <table class="table">

                            <!-- Table Head Start -->
                            <thead>
                            <tr class="cart-product-head" th:attr="data-order-id=${orderId}">
                                <th class="cart-product-name text-start">商品</th>
                                <th class="cart-product-total text-end">总计</th>
                            </tr>
                            </thead>
                            <!-- Table Head End -->

                            <!-- Table Body Start -->
                            <tbody>
                            <tr class="cart_item" th:each="v:${orderItems}">
                                <td class="cart-product-name text-start ps-0 product-info"
                                    th:attr="data-quantity=${v.productQuantity}"
                                    th:text="${v.productName} + ' × ' + ${v.productQuantity}"></td>
                                <td class="cart-product-total text-end pe-0">
                                    <span class="amount"
                                          th:text="'￥' + (${v.productPrice}*${v.productQuantity})"></span>
                                </td>
                            </tr>
                            </tbody>
                            <!-- Table Body End -->

                            <!-- Table Footer Start -->
                            <tfoot>
                            <tr class="cart-subtotal">
                                <th class="text-start ps-0">小计</th>
                                <td class="text-end pe-0"><span class="amount" th:id="back-sub-total">￥0</span></td>
                            </tr>
                            <tr class="cart-subtotal">
                                <th class="text-start ps-0">运费</th>
                                <td class="text-end pe-0"><span class="amount" th:id="back-sub-shipping">￥0</span></td>
                            </tr>
                            <tr class="order-total">
                                <th class="text-start ps-0">合计</th>
                                <td class="text-end pe-0"><strong><span class="amount"
                                                                        th:id="all-total">￥0</span></strong></td>
                            </tr>
                            </tfoot>
                            <!-- Table Footer End -->

                        </table>
                    </div>
                    <!-- Your Order Table End -->

                    <!-- Payment Accordion Order Button Start -->
                    <div class="payment-accordion-order-button">
                        <div class="payment-accordion">
                            <div class="single-payment">
                                <h5 class="panel-title mb-3">
                                    <a class="collapse-off" data-bs-toggle="collapse" href="#collapseExample"
                                       aria-expanded="false" aria-controls="collapseExample">
                                        退货原因
                                    </a>
                                </h5>
                                <div class="collapse show" id="collapseExample">
                                    <div class="card card-body rounded-0">
                                        <p title="你的退货原因" id="returnReason" contenteditable="true"
                                           style="outline: none"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="order-button-payment">
                            <button id="commitReason" class="btn btn-primary btn-hover-secondary rounded-0 w-100">提交
                            </button>
                        </div>
                    </div>
                    <!-- Payment Accordion Order Button End -->
                </div>
                <!-- Your Order Area End -->
            </div>
        </div>
    </div>
</div>
<script th:src="@{assets/js/vendor.min.js}"></script>
<script th:src="@{assets/js/plugins.min.js}"></script>

<!--Main JS-->
<script th:src="@{assets/js/main.js}"></script>
<script>
    $(function () {
        getTotalAmount()
    })

    $('#commitReason').bind('click', function () {
        $.ajax({
            type: 'post',
            url: "/order/chargebacksCommit",
            data: {
                "orderId": $('.cart-product-head').attr('data-order-id'),
                "reason": $('#returnReason').text()
            },
            success: function () {

            }
        })
    })

    function getTotalAmount() {
        let totalAmount = 0
        let count = 0
        $('.amount').each(function () {
            totalAmount += parseFloat($(this).text().substring(1))
        })

        $('.product-info').each(function () {
            count += parseInt($(this).attr('data-quantity'))
        })
        $('#back-sub-total').text('￥' + totalAmount)
        $('#back-sub-shipping').text('￥' + (count * 2))
        $('#all-total').text('￥' + (count * 2 + totalAmount))
    }
</script>
</body>
</html>